<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" width="50%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main>
            <div class="printMain" ref="printMain" v-if="mode=='edit'">
                <div class="title">
                    <span>{{detail.template_title}}</span>
                </div>
                <div class="type">{{detail.goods_info}}</div>
                <div class="contont">
                    <el-image class="img" :src="detail.qrcode" style="width: 150px;height: auto;margin: 0 5px;" />
                    <div style="color:#f00;font-size:22px">打印时间: {{detail.print_time}}</div>
                </div>
                <div class="top">
                    <div class="detail" style="width:50%">
                        <div class="detailName">工厂货号 : {{detail.factory_art_no}}</div>
                        <div class="detailName">样衣尺码 : {{detail.size}}</div>
                        <div class="detailName">吓数 : {{detail.staff_name}}</div>
                    </div>
                    <div class="detail" style="width:50%">
                        <div class="detailName">工厂 : {{detail.referred_as}}</div>
                        <div class="detailName">客户 : {{detail.custom_name}}</div>
                        <div class="detailName">交期 : {{detail.deliver_date}} <span style="color:#f00" v-if="detail.order_label==1">(紧急)</span></div>
                    </div>
                </div>
                <div class="detailName">打版要求 : {{detail.ask}}</div>
                <div style="margin:30px 0;text-align:center;font-size:20px" >打版物料信息</div>
                <div class='products' style="width: 100%;border-top: 1px solid #000;border-left: 1px solid #000;">
                    <div class='custom-table'>
                        <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;'>
                            <div class='w-40 left materName'><span>物料SKC</span></div>
                            <div class='w-40 left materName'><span>供应商</span></div>
                            <div class='w-40 left materName'><span>物料名称</span></div>
                            <div class='w-40 left materName'><span>物料规格</span></div>
                            <div class='w-40 left materImage'><span>物料图片</span></div>
                            <div class='w-40 left materImage'><span>物料二维码</span></div>
                        </div>
                        <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;' v-for="(item,index) in detail.marterial" :key="index">
                            <div class='w-40 left materName'><span style="width: 110px;word-break: break-word;">{{item.material_code}}</span></div>
                            <div class='w-40 left materName'><span>{{item.apply_name}}</span></div>
                            <div class='w-40 left materName'><span>{{item.material_name}}</span></div>
                            <div class='w-40 left materName'><span>{{item.colour}}</span></div>
                            <div class='w-40 left materImage'>
                                <el-image class="img" :src="item.image" style="width: 100px;height: 29px;margin: 0 5px;" />
                            </div>
                            <div class='w-40 left materImage'>
                                <el-image class="img" :src="item.qrcode" style="width: 100px;height: auto;margin: 0 5px;" />
                            </div>
                        </div>
                    </div>
                </div>
                <div v-for="(x,i) in detail.images" :key="i" style="margin-top:30px;display: flex;justify-content: center;">
                    <div v-if="i>=1" style="page-break-after: always;"></div>
                    <div style="width:90%;display: flex;justify-content: center;">
                        <img :src="x" style="width:80%">
                    </div>
                </div>
            </div>
            <div class="printMain" ref="printMain" v-if="mode=='add'">
                <div v-for="(item,index) in template_data" :key="index">
                    <div v-if="index>=1" style="page-break-after: always;"></div>
                    <div class="title">
                        <span>{{item.template_title}}</span>
                    </div>
                    <div class="type">{{detail.goods_info}}</div>
                    <div class="contont">
                        <el-image class="img" :src="item.qrcode" style="width: 150px;height: auto;margin: 0 5px;" />
                        <div style="color:#f00;font-size:22px">打印时间: {{item.print_time}}</div>
                    </div>
                    <div class="top">
                        <div class="detail" style="width:33%">
                            <div class="detailName">工厂货号 : {{item.factory_art_no}}</div>
                            <div class="detailName">样衣尺码 : {{item.size}}</div>
                        </div>
                        <div class="detail" style="width:33%">
                            <div class="detailName">客户 : {{item.custom_name}}</div>
                            <div class="detailName">交期 : {{item.deliver_date}} <span style="color:#f00" v-if="item.order_label==1">(紧急)</span></div>
                        </div>
                        <div class="detail" style="width:33%">
                            <div class="detailName">工厂 : {{item.referred_as}}</div>
                            <div class="detailName">吓数 : {{item.staff_name}}</div>
                        </div>
                    </div>
                    <div class="detailName">打版要求 : {{item.ask}}</div>
                    <div style="margin:30px 0;text-align:center;font-size:20px" >打版物料信息</div>
                    <div class='products' style="width: 100%;border-top: 1px solid #000;border-left: 1px solid #000;">
                        <div class='custom-table'>
                            <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;'>
                                <div class='w-40 left materName'><span>物料SKC</span></div>
                                <div class='w-40 left materName'><span>供应商</span></div>
                                <div class='w-40 left materName'><span>物料名称</span></div>
                                <div class='w-40 left materName'><span>物料规格</span></div>
                                <div class='w-40 left materImage'><span>物料图片</span></div>
                                <div class='w-40 left materImage'><span>物料二维码</span></div>
                            </div>
                            <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;' v-for="(item1,index) in item.marterial" :key="index">
                                <div class='w-40 left materName'><span style="width: 110px;word-break: break-word;">{{item1.material_code}}</span></div>
                                <div class='w-40 left materName'><span>{{item1.apply_name}}</span></div>
                                <div class='w-40 left materName'><span>{{item1.material_name}}</span></div>
                                <div class='w-40 left materName'><span>{{item1.colour}}</span></div>
                                <div class='w-40 left materImage'>
                                    <el-image class="img" :src="item1.image" style="width: 100px;height: 29px;margin: 0 5px;" />
                                </div>
                                <div class='w-40 left materImage'>
                                    <el-image class="img" :src="item1.qrcode" style="width: 100px;height: auto;margin: 0 5px;" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-for="(x,i) in item.images" :key="i" style="margin-top:30px;display: flex;justify-content: center;">
                        <div v-if="i>=1" style="page-break-after: always;"></div>
                        <div style="width:90%;display: flex;justify-content: center;">
                            <img :src="x" style="width:60%">
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
    </el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		name: 'print',
		data() {
			return {
                mode: "add",
				titleMap: {
					add: '打印工艺单',
					show: '打印',
					edit: '打印版单'
				},
				visible: false,
				isSaveing: false,
                detail:{},
                template_data:[]
            }
		},
		methods: {
            //显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            setData(data){
                if(this.mode=='edit'){
                    this.detail = data[0]
                }else if(this.mode=='add'){
                    this.template_data = data
                }
			},
			async print(){
                await this.$API.develop.edition.printStatus.post({order_no:this.detail.order_no});
				//直接传入REF或者querySelector
				print(this.$refs.printMain)
                setTimeout(()=>{
                    this.$emit('success', this.form, this.mode)
                    this.visible = false
                },500)
			},
		}
	}
</script>

<style scoped lang="scss">
div{
    color: #000;
}
.title{
    text-align: center;
    font-weight: 600;
    font-size: 32px;
    color: #000;
    margin-bottom: 10px;
}
.type{
    text-align: center;
    font-size: 22px;
}
.contont{
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    margin-top: 10px;
    .header{
        margin-left: 10px;
        width: 100%;
        .comment{
            margin-bottom: 20px;
            display: inline-block;
        }
    }
}
.top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .detail{
        line-height: 32px;
    }
}
.materName{
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
.materImage{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
.detailName{
    font-size: 21px;
    margin-bottom: 15px;
}
</style>
